import { Tabs, Image } from 'antd-mobile'
import { useState } from 'react'
import Lists from '@/components/List/index'
import { StarOutline } from 'antd-mobile-icons'
import style from './index.module.scss'
import { useNavigate } from 'react-router-dom'
import { saveID, savePath } from '@/reduxToolkit/reducers/detail'
import { useDispatch } from 'react-redux'

const Tab = () => {
  const [title] = useState(['畅销', '新书', '精选'])  
  const [typeList] = useState(['sales', 'new', 'recommend'])
  const [activeType, setActiveType] = useState('sales') // 当前下标
  const navigate = useNavigate()
  const dispatch: any = useDispatch()

  const getContent = () => {
    return title.map((item, index) => {
      return (
        <Tabs.Tab title={item} key={typeList[index]}>
          <Lists page='home' type={activeType} getlist={(goodlist: any) => {
            return goodlist.map((item: any, index: number) => {
              return (
                <div key={index} className={style.item} onClick={() => goDetail(item.id)}>
                  <Image src={item.cover_url}/>
                  <p className={style.title}>{item.title}</p>
                  <p className={style.description}>
                    <span className={style.price}>￥{item.price}</span> 
                    <StarOutline className={style.like}/>
                    <span>{item.collects_count}</span>
                  </p>
               </div>
              )
            })
          }}></Lists>
        </Tabs.Tab>
      )
    })
  }

  // 跳转至详情页
  const goDetail = (id: number) => {
    navigate('/detail')
    dispatch(saveID(id))
    dispatch(savePath('home'))
  }

  return (
    <Tabs style={{ '--title-font-size': '15px' }} onChange={(key: string) => setActiveType(key)}>
      {getContent()}     
    </Tabs>
  )
}

export default Tab